<template>
  <div class="approval-group">
    <div class="approval-group-left">
      <div class="anchor-list">
        <ApprovalAnchor :list="list" />
      </div>
    </div>
    <div class="list-wrap">
      <a-space class="button-group">
        <a-button type="primary" @click="addFlowGroup">新建分组</a-button>
        <a-button type="outline" @click="flowOrderModal">分组排序</a-button>
      </a-space>
      <template v-for="group in list" :key="group.id">
        <a-typography-title class="block-title" :heading="6">
          <div class="group-title" :id="'anchor' + group.id">
            {{ group.groupName }}
          </div>
          <a-space>
            <a-button type="primary" @click="addFlow(group.groupCode)"
              >新增流程</a-button
            >
            <a-button type="primary" @click="editFlowGroup(group)"
              >编辑</a-button
            >
            <a-popconfirm
              content="确定删除?"
              type="warning"
              @ok="delFlowGroup(group)"
            >
              <a-button type="primary" status="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </a-typography-title>
        <a-row class="list-row" :gutter="24">
          <!-- <a-col
            :xs="12"
            :sm="12"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
            class="list-col"
          >
            <div class="card-wrap empty-wrap">
              <a-card :bordered="false" hoverable>
                <a-result
                  :status="null"
                  :title="'点击创建'"
                  @click="addFlow(group.groupCode)"
                >
                  <template #icon>
                    <icon-plus style="font-size: 20px" />
                  </template>
                </a-result>
              </a-card>
            </div>
          </a-col> -->
          <a-col
            v-for="item in group.processList"
            :key="item.id"
            class="list-col"
            :xs="12"
            :sm="12"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <CardWrap :data="item" @edit="editFlow" @del="delFlow">
              <template #btn>
                <a-space>
                  <a-button type="text" @click="editFlow(item.id)">
                    <template #icon>
                      <icon-edit />
                    </template>
                    编辑
                  </a-button>
                  <!-- <a-button type="primary" @click="initate(item.id)">
                      发起
                    </a-button> -->
                  <a-popconfirm
                    v-if="item.processStatus !== 1"
                    content="确定发布?"
                    @ok="release(item.id)"
                  >
                    <a-button type="text">
                      <template #icon>
                        <icon-launch />
                      </template>
                      发布
                    </a-button>
                  </a-popconfirm>
                  <a-button v-else type="text" status="warning">
                    <template #icon>
                      <!-- <icon-delete />
                        <icon-launch />
                        <icon-edit />
                        <icon-copy /> -->
                      <icon-minus-circle />
                    </template>
                    停用
                  </a-button>
                  <a-popconfirm
                    content="确定删除?"
                    type="warning"
                    @ok="delFlow(item.id)"
                  >
                    <a-button status="danger" type="text">
                      <template #icon>
                        <icon-delete />
                      </template>
                      删除
                    </a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </CardWrap>
          </a-col>
        </a-row>
      </template>
    </div>
  </div>
  <GroupDetail
    v-model:visible="groupVisible"
    :data="flowGroupData"
    @save="saveGroup"
  />
  <FlowOrderModal
    v-model:visible="flowOrderVisible"
    :data="list"
    @orderSave="orderSave"
  />
</template>

<script lang="ts" setup>
import CardWrap from './components/CardWrap.vue';
import {
  AddFlowProcessGroups,
  delFlowProcessGroupsByIds,
  editFlowProcessGroups,
  getFlowProcessGroupsById,
  getFlowGroupsAndProcessList
} from '@/apis/flowGroup/index';
import {
  FlowGroup,
  FlowGroupAndProcessParams,
  FlowGroupSort,
  OrderParamList
} from '@/apis/flowGroup/type';
import * as apiFlow from '@/apis/flow/index';
import { useRouter } from 'vue-router';
import GroupDetail from './components/GroupDetail.vue';
import { Flow } from '@/apis/flow/type';
import ApprovalAnchor from './components/ApprovalAnchor.vue';
import FlowOrderModal from './components/FlowOrderModal.vue';
import { flowOrderSetting } from '@/apis/flowGroup/index';

const router = useRouter();
onMounted(() => {
  init();
  getFlowGroup();
});
const init = () => {};
const list = ref<FlowGroup[]>([]);
const groupParams = reactive<FlowGroupAndProcessParams>({});
/**
 * 获取流程分组及其流程
 */
const getFlowGroup = async () => {
  let res = await getFlowGroupsAndProcessList(groupParams);
  list.value = res?.processGroupsDetail || [];
};

const delFlowGroup = async (flowGroup: FlowGroup) => {
  let ids = [Number(flowGroup.id)];
  await delFlowProcessGroupsByIds({ ids });
  getFlowGroup();
};

const groupVisible = ref(false);
const openModal = () => {
  groupVisible.value = true;
};
/**
 * 添加，编辑流程分组
 * @param data
 */
const saveGroup = async (data: FlowGroup) => {
  //有id为编辑，无id为新增
  if (Number(data.id) > 0) {
    await editFlowProcessGroups(data);
  } else {
    await AddFlowProcessGroups(data);
  }
  getFlowGroup();
};
const flowGroupData = ref<FlowGroup>({});
//添加审批分组
const addFlowGroup = async () => {
  flowGroupData.value = {};
  openModal();
};
//编辑审批分组
const editFlowGroup = async (group: FlowGroup) => {
  flowGroupData.value = {};
  const { groupCode } = group;
  if (!groupCode) return;
  let res = await getFlowProcessGroupsById(groupCode);
  flowGroupData.value = res?.processGroupsInfo || {};
  openModal();
};

// 流程管理----------------------------------------------------------

const flowVisible = ref(false);
const flowData = ref<Flow>({});
// 添加分组里的单个流程
const addFlow = (groupCode?: string) => {
  if (!groupCode) return;
  // openFlowModal();
  const routeData = router.resolve({
    name: 'FlowSetting',
    query: { groupCode }
  });
  window.open(routeData.href, '_blank');
};
// 编辑分组里的单个流程
const editFlow = async (id?: number) => {
  if (!id) return;
  const routeData = router.resolve({
    name: 'FlowSetting',
    query: { id }
  });
  window.open(routeData.href, '_blank');
};
// 发起审批动作
const initate = async (id?: number) => {
  if (!id) return;
  const routeData = router.resolve({
    name: 'InitiateApproval',
    query: { id }
  });
  window.open(routeData.href, '_blank');
};
// 发布
const release = async (id?: number) => {
  if (!id) return;
  await apiFlow.releaseFlow({ id });
  getFlowGroup();
};
// 删除审批
const delFlow = async (id?: number) => {
  if (!id) return;
  let ids = [id];
  await apiFlow.delFlowByIds({ ids });
  getFlowGroup();
};
const flowOrderVisible = ref(false);
// 流程分组排序
const flowOrderModal = () => {
  flowOrderVisible.value = true;
};
// 保存排序
const orderSave = async (data: OrderParamList[]) => {
  let obj: FlowGroupSort = { orderParamList: [] };
  data.forEach((item, index) => {
    obj.orderParamList?.push({ groupCode: item.groupCode, orderNo: index + 1 });
  });

  await flowOrderSetting(obj);
  getFlowGroup();
};
</script>

<style scoped lang="less">
.approval-group {
  padding: 16px;
  display: flex;
  &-left {
    width: 150px;
    overflow: auto;
    position: relative;
    .anchor-list {
      // background: #fff;
      position: absolute;
      top: 0;
      bottom: 0;
      min-height: 0;
      overflow-y: visible;
      overflow: hidden;
      overflow-x: hidden;
    }
  }
  .list-wrap {
    flex: 1;
    padding: 20px;
    .button-group {
      display: flex;
      justify-content: flex-end;
    }
    .block-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #eee;
      padding: 5px 10px;
    }
  }
}
.list-row {
  align-items: stretch;
}
.list-col {
  margin-bottom: 16px;
  min-height: 100px;
}
.card-wrap {
  height: 100%;
  transition: all 0.3s;
  border: 1px solid var(--color-neutral-3);
  &:hover {
    transform: translateY(-4px);
  }
  :deep(.arco-card-meta-description) {
    color: rgb(var(--gray-6));
    .arco-descriptions-item-label-inline {
      font-weight: normal;
      font-size: 12px;
      color: rgb(var(--gray-6));
    }
    .arco-descriptions-item-value-inline {
      color: rgb(var(--gray-8));
    }
  }
}
.empty-wrap {
  //   height: 200px;
  border-radius: 4px;
  :deep(.arco-card) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    .arco-result-title {
      color: rgb(var(--gray-6));
    }
  }
}
</style>
